<template>
  <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="20" v-if="drawerVisible">
        <el-col :span="5">
          <el-input placeholder="请输入频道名称" v-model="queryInfo.channel_name" class="input-with-select" :clearable="true" @clear="getChannelList">
            <el-button slot="append" icon="el-icon-search" @click="getChannelList"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">
          <el-button type="primary" @click="addDialogVisible = true">添加频道</el-button>
        </el-col>
        <el-col :span="4" style="text-align: right;">
          <table-tools
            :drawerSearch="drawerVisible"
            @searchchange="searchChange"
            @refreshclick="refreshClick">
          </table-tools>
        </el-col>
      </el-row>

      <!-- 列表区域 -->
      <el-table
        ref="table"
        v-loading="loading"
        :data="channelList"
        border
        stripe
        style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="channel_name" label="频道名称"></el-table-column>
        <el-table-column prop="create_time" label="添加时间"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <!-- 查看按钮 -->
            <!-- <el-button type="primary" :id="scope.row.id" icon="el-icon-view" @click="showDialog(scope.row.id)">查看</el-button> -->
            <!-- 修改按钮 -->
            <el-button type="primary" :id="scope.row.id" icon="el-icon-edit" @click="showEditDialog(scope.row.id)">编辑</el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" :id="scope.row.id"  icon="el-icon-delete" @click="delChannel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <!-- 添加频道的对话框 -->
      <el-dialog
        title="添加频道"
        :visible.sync="addDialogVisible"
        width="70%"
        @close="addDilogClosed">
        <!-- 内容主体区域 -->
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" class="addForm-channel">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="频道名称" prop="add_channel_name">
                  <el-input v-model="addForm.channel_name"></el-input>
                </el-form-item>
                <el-form-item label="容量限制" prop="channel_cap">
                  <el-input v-model="addForm.channel_cap"></el-input>
                </el-form-item>
                <el-form-item label="开播时间" prop="s_play_time">
                  <el-time-picker
                    v-model="addForm.s_play_time"
                    :editable="true"
                    placeholder="选择时间">
                  </el-time-picker>
                </el-form-item>
                <el-form-item label="主播出站" prop="master_play_term">
                  <el-select v-model="addForm.master_play_term" placeholder="请选择">
                    <el-option
                      v-for="item in master_play_term"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="主心跳端口" prop="master_heartbeat_port">
                  <el-select v-model="addForm.master_heartbeat_port" placeholder="请选择">
                    <el-option
                      v-for="item in master_heartbeat_port"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="主切换台" prop="master_swt_id">
                  <el-select v-model="addForm.master_swt_id" placeholder="请选择">
                    <el-option
                      v-for="item in master_swt_id"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="主服务器" prop="master_vdr_id">
                  <el-select v-model="addForm.master_vdr_id" placeholder="请选择">
                    <el-option
                      v-for="item in master_vdr_id"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="主播出通道" prop="master_vdr_chan">
                  <el-select v-model="addForm.master_vdr_chan" placeholder="请选择">
                    <el-option
                      v-for="item in master_vdr_chan"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="外置键混" prop="keymix">
                  <el-select v-model="addForm.keymix" placeholder="请选择">
                    <el-option
                      v-for="item in keymix"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="受控协议" prop="agreement">
                  <el-select v-model="addForm.agreement" placeholder="请选择">
                    <el-option
                      v-for="item in agreement"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="InsPlay_flag">
                  <el-checkbox v-model="addForm.InsPlay_flag" @change="handleCheck_InsPlay_flag">插播模式</el-checkbox>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item>
                  <el-radio v-model="addForm.resolution" label="1">标清(SD)</el-radio>
                  <el-radio v-model="addForm.resolution" label="2">高清(HD)</el-radio>
                </el-form-item>
                <el-form-item label="广告节目" prop="channel_adv_cap">
                  <el-input v-model="addForm.channel_adv_cap"></el-input>
                  <span>小时(0不限制)</span>
                </el-form-item>
                <el-form-item>
                  <el-checkbox v-model="addForm.is_24_hours" true-label="1">24H连续播出</el-checkbox>
                  <el-checkbox v-model="addForm.shoudongtiaodan" true-label="1">手动调单</el-checkbox>
                </el-form-item>
                <el-form-item label="备播出站" prop="slave_play_term">
                  <el-select v-model="addForm.slave_play_term" placeholder="请选择">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in master_play_term"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="备心跳端口" prop="slave_heartbeat_port">
                  <el-select v-model="addForm.slave_heartbeat_port" placeholder="请选择">
                    <el-option
                      v-for="item in master_heartbeat_port"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="备切换台" prop="slave_swt_id">
                  <el-select v-model="addForm.slave_swt_id" placeholder="请选择">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in master_swt_id"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="备服务器" prop="slave_vdr_id">
                  <el-select v-model="addForm.slave_vdr_id" placeholder="请选择">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in master_vdr_id"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="备播出通道" prop="slave_vdr_chan">
                  <el-select v-model="addForm.slave_vdr_chan" placeholder="请选择">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in master_vdr_chan"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="控制字幕机" prop="cg">
                  <el-select v-model="addForm.cg" placeholder="请选择">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in cg"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="受控端口" prop="agreement_post">
                  <el-select v-model="addForm.agreement_post" placeholder="请选择">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in agreement_post"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="InsPlay_seg">
                  <el-checkbox v-model="addForm.InsPlay_seg" :disabled="disabledInsPlay_flag">分段插播</el-checkbox>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item>
                  <el-button type="info" @click="channDataDialogVisible = true" plain disabled>节目参数</el-button>
                  <el-button type="info" @click="createTypeDialogVisible = true" plain disabled>建单方式</el-button>
                </el-form-item>
                <el-form-item prop="is_thirdbk">
                  <el-checkbox v-model="addForm.is_thirdbk" true-label="1" @change="handleCheck_is_thirdbk">第三备</el-checkbox>
                </el-form-item>
                <el-form-item label="播出站" prop="third_play_term">
                  <el-select v-model="addForm.third_play_term" placeholder="请选择" :disabled="disabledis_thirdbk">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in third_play_term"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="服务器" prop="third_vdr_id">
                  <el-select v-model="addForm.third_vdr_id" placeholder="请选择" :disabled="disabledis_thirdbk">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in third_vdr_id"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="播出通道" prop="third_vdr_chan">
                  <el-select v-model="addForm.third_vdr_chan" placeholder="请选择" :disabled="disabledis_thirdbk">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in third_vdr_chan"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="is_upplay">
                  <el-checkbox v-model="addForm.is_upplay" true-label="1" @change="handleCheck_is_upplay">提前播</el-checkbox>
                </el-form-item>
                <el-form-item label="服务器" prop="upplay_vdr_id">
                  <el-select v-model="addForm.upplay_vdr_id" placeholder="请选择" :disabled="disabledis_upplay">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in upplay_vdr_id"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="播出通道" prop="upplay_vdr_chan">
                  <el-select v-model="addForm.upplay_vdr_chan" placeholder="请选择" :disabled="disabledis_upplay">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in upplay_vdr_chan"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="播出时间" prop="upplay_time">
                  <el-time-picker
                    v-model="addForm.upplay_time"
                    :editable="true"
                    placeholder="选择时间" :disabled="disabledis_upplay">
                  </el-time-picker>
                </el-form-item>
                <el-form-item prop="InsPlay_seg">
                  <el-checkbox v-model="addForm.InsPlay_AdvGrp" :disabled="disabledInsPlay_flag">广告整组播出</el-checkbox>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="16">
              <div class="grid-content bg-purple">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="addForm.remark"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addChannel">确 定</el-button>
        </span>
      </el-dialog>
      <!--添加频道的对话框-->

      <!--编辑频道的对话框-->
      <el-dialog
        title="编辑频道"
        :visible.sync="editDialogVisible"
        width="70%"
        @close="editDilogClosed">
        <!-- 内容主体区域 -->
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" class="editForm-channel">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="频道名称" prop="add_channel_name">
                  <el-input v-model="addForm.channel_name"></el-input>
                </el-form-item>
                <el-form-item label="容量限制" prop="channel_cap">
                  <el-input v-model="addForm.channel_cap"></el-input>
                </el-form-item>
                <el-form-item label="开播时间" prop="s_play_time">
                  <el-time-picker
                    v-model="addForm.s_play_time"
                    :editable="true"
                    placeholder="选择时间">
                  </el-time-picker>
                </el-form-item>
                <el-form-item label="主播出站" prop="master_play_term">
                  <el-select v-model="addForm.master_play_term" placeholder="请选择">
                    <el-option
                      v-for="item in master_play_term"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="主心跳端口" prop="master_heartbeat_port">
                  <el-select v-model="addForm.master_heartbeat_port" placeholder="请选择">
                    <el-option
                      v-for="item in master_heartbeat_port"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="主切换台" prop="master_swt_id">
                  <el-select v-model="addForm.master_swt_id" placeholder="请选择">
                    <el-option
                      v-for="item in master_swt_id"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="主服务器" prop="master_vdr_id">
                  <el-select v-model="addForm.master_vdr_id" placeholder="请选择">
                    <el-option
                      v-for="item in master_vdr_id"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="主播出通道" prop="master_vdr_chan">
                  <el-select v-model="addForm.master_vdr_chan" placeholder="请选择">
                    <el-option
                      v-for="item in master_vdr_chan"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="外置键混" prop="keymix">
                  <el-select v-model="addForm.keymix" placeholder="请选择">
                    <el-option
                      v-for="item in keymix"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="受控协议" prop="agreement">
                  <el-select v-model="addForm.agreement" placeholder="请选择">
                    <el-option
                      v-for="item in agreement"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="InsPlay_flag">
                  <el-checkbox v-model="addForm.InsPlay_flag" @change="handleCheck_InsPlay_flag">插播模式</el-checkbox>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item>
                  <el-radio v-model="addForm.resolution" label="1">标清(SD)</el-radio>
                  <el-radio v-model="addForm.resolution" label="2">高清(HD)</el-radio>
                </el-form-item>
                <el-form-item label="广告节目" prop="channel_adv_cap">
                  <el-input v-model="addForm.channel_adv_cap"></el-input>
                  <span>小时(0不限制)</span>
                </el-form-item>
                <el-form-item>
                  <el-checkbox v-model="addForm.is_24_hours" true-label="1">24H连续播出</el-checkbox>
                  <el-checkbox v-model="addForm.shoudongtiaodan" true-label="1">手动调单</el-checkbox>
                </el-form-item>
                <el-form-item label="备播出站" prop="slave_play_term">
                  <el-select v-model="addForm.slave_play_term" placeholder="请选择">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in master_play_term"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="备心跳端口" prop="slave_heartbeat_port">
                  <el-select v-model="addForm.slave_heartbeat_port" placeholder="请选择">
                    <el-option
                      v-for="item in master_heartbeat_port"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="备切换台" prop="slave_swt_id">
                  <el-select v-model="addForm.slave_swt_id" placeholder="请选择">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in master_swt_id"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="备服务器" prop="slave_vdr_id">
                  <el-select v-model="addForm.slave_vdr_id" placeholder="请选择">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in master_vdr_id"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="备播出通道" prop="slave_vdr_chan">
                  <el-select v-model="addForm.slave_vdr_chan" placeholder="请选择">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in master_vdr_chan"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="控制字幕机" prop="cg">
                  <el-select v-model="addForm.cg" placeholder="请选择">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in cg"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="受控端口" prop="agreement_post">
                  <el-select v-model="addForm.agreement_post" placeholder="请选择">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in agreement_post"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="InsPlay_seg">
                  <el-checkbox v-model="addForm.InsPlay_seg" :disabled="disabledInsPlay_flag">分段插播</el-checkbox>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item>
                  <el-button type="info" @click="channDataDialogVisible = true" plain>节目参数</el-button>
                  <el-button type="info" @click="createTypeDialogVisible = true" plain>建单方式</el-button>
                </el-form-item>
                <el-form-item prop="is_thirdbk">
                  <el-checkbox v-model="addForm.is_thirdbk" true-label="1" @change="handleCheck_is_thirdbk">第三备</el-checkbox>
                </el-form-item>
                <el-form-item label="播出站" prop="third_play_term">
                  <el-select v-model="addForm.third_play_term" placeholder="请选择" :disabled="disabledis_thirdbk">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in third_play_term"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="服务器" prop="third_vdr_id">
                  <el-select v-model="addForm.third_vdr_id" placeholder="请选择" :disabled="disabledis_thirdbk">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in third_vdr_id"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="播出通道" prop="third_vdr_chan">
                  <el-select v-model="addForm.third_vdr_chan" placeholder="请选择" :disabled="disabledis_thirdbk">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in third_vdr_chan"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="is_upplay">
                  <el-checkbox v-model="addForm.is_upplay" true-label="1" @change="handleCheck_is_upplay">提前播</el-checkbox>
                </el-form-item>
                <el-form-item label="服务器" prop="upplay_vdr_id">
                  <el-select v-model="addForm.upplay_vdr_id" placeholder="请选择" :disabled="disabledis_upplay">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in upplay_vdr_id"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="播出通道" prop="upplay_vdr_chan">
                  <el-select v-model="addForm.upplay_vdr_chan" placeholder="请选择" :disabled="disabledis_upplay">
                    <el-option label="" value="无">无</el-option>
                    <el-option
                      v-for="item in upplay_vdr_chan"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="播出时间" prop="upplay_time">
                  <el-time-picker
                    v-model="addForm.upplay_time"
                    :editable="true"
                    placeholder="选择时间" :disabled="disabledis_upplay">
                  </el-time-picker>
                </el-form-item>
                <el-form-item prop="InsPlay_seg">
                  <el-checkbox v-model="addForm.InsPlay_AdvGrp" :disabled="disabledInsPlay_flag">广告整组播出</el-checkbox>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="16">
              <div class="grid-content bg-purple">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="addForm.remark"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editChannel">确 定</el-button>
        </span>
      </el-dialog>
      <!--编辑频道的对话框-->

      <!--节目参数弹框-->
      <el-dialog
        title="节目参数"
        :visible.sync="channDataDialogVisible"
        width="50%"
        @close="channDataDialogClosed">
        <!-- 节目参数修改主体 -->
        <el-form :model="editChannDataForm" :rules="editChannDataFormRules" ref="editChannDataFormRef" label-width="70px" class="demo-ruleForm">

        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="channDataDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editChannel">确 定</el-button>
        </span>
      </el-dialog>
      <!--节目参数弹框-->

      <!--建单方式弹框-->
      <el-dialog
        title="建单方式"
        :visible.sync="createTypeDialogVisible"
        width="30%"
        @close="createTypeDialogClosed">
        <!-- 节目参数修改主体 -->
        <el-form :model="editChannDataForm" :rules="editChannDataFormRules" ref="editChannDataFormRef" label-width="50px" class="demo-ruleForm">
          <el-radio-group v-model="addForm.jiandantype" @change="changeCreateType">
             <div>
               <el-radio :label="1">手动建单</el-radio>
             </div>
             <div>
               <el-radio :label="2">空节目单</el-radio>
             </div>
             <div>
              <el-radio :label="3">自动天循环</el-radio>
             </div>
             <div>
               <el-radio :label="4">自动周循环</el-radio>
             </div>
          </el-radio-group>
          <div><span>备注</span></div>
          <div><span>{{createTypeTips}}</span></div>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="createTypeDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editChannel">确 定</el-button>
        </span>
      </el-dialog>
      <!--节目参数弹框-->

    </el-card>
  </div>

</template>

<script>
import tableTools from '@/components/tableToolsComponents' // tabs工具栏组件
export default {
  components: {
    tableTools
  },
  data() {
    return {
      drawerVisible: true, // 搜索栏显示状态
      loading: false, // 表格刷新loading状态
      queryInfo: {
        // 频道名称
        channel_name: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示数目
        pagesize: 10
      },
      channelList: [],
      // 建单方式下的 span 初始值
      createTypeTips: '通过节目单编辑软件由总编室节目生成播出串联单，如果总编室节目单没有生成并审核，则不能生成播出串联单，在自动播出软件中，则自动生成一空节目单。【这是系统默认方式】',
      total: 0,
      // 控制添加频道对话框的显示与隐藏
      addDialogVisible: false,
      // 编辑频道弹框
      editDialogVisible: false,
      // 编辑节目参数弹框
      channDataDialogVisible: false,
      // 建单方式弹框
      createTypeDialogVisible: false,
      // 添加频道
      addForm: {
        // 频道名称
        channel_name: '',
        // 容量限制
        channel_cap: 0,
        // 开播时间 年 月 日 时 分 秒
        s_play_time: new Date(2020, 9, 10, 6, 0, 0),
        // 主播出站终端ID
        master_play_term: '',
        // 主心跳端口
        master_heartbeat_port: '',
        // 主切换台
        master_swt_id: '',
        // 主视频服务器
        master_vdr_id: '',
        // 主视频服务播出通道
        master_vdr_chan: '',
        // 外置键混
        keymix: '',
        // 受控协议
        agreement: '',
        // 插播模式
        InsPlay_flag: '',
        /* ---------------分割------------------ */
        // 标清、高清选择
        resolution: '1',
        // 广告节目限制（0不限制）
        channel_adv_cap: '0',
        // 24H连续播出
        is_24_hours: '',
        // 手动调单
        shoudongtiaodan: '',
        // 主播出站终端ID
        slave_play_term: '',
        // 主心跳端口
        slave_heartbeat_port: '',
        // 主切换台
        slave_swt_id: '',
        // 主视频服务器
        slave_vdr_id: '',
        // 主视频服务播出通道
        slave_vdr_chan: '',
        // 外置键混
        cg: '',
        // 受控协议
        agreement_post: '',
        // 分段插播
        InsPlay_seg: '',
        // 第三备
        is_thirdbk: '',
        // 第三播出站终端ID
        third_play_term: '',
        // 第三播出服务器ID
        third_vdr_id: '',
        // 第三备播出通道
        third_vdr_chan: '',
        // 是否提前播
        is_upplay: '',
        // 提前播视频服务器ID
        upplay_vdr_id: '',
        // 提前播播出通道
        upplay_vdr_chan: '',
        // 开播时间 年 月 日 时 分 秒
        upplay_time: new Date(2020, 9, 10, 8, 0, 0),
        // 是否广告整组播出
        InsPlay_AdvGrp: '',
        // 建单方式radio初始值
        jiandantype: '1'
      },
      // 插播disable控制，默认置灰
      disabledInsPlay_flag: true,
      // 第三备disable控制，默认置灰
      disabledis_thirdbk: true,
      disabledis_upplay: true,
      // 编辑节目参数
      editChannDataForm: {},
      // 主播出站终端ID
      master_play_term: [{
        value: '1',
        label: '龙腾-LG'
      }, {
        value: '2',
        label: '播控频道-LG'
      }],
      // 主心跳端口
      master_heartbeat_port: [{
        value: '1',
        label: 'COM1'
      }],
      // 主切换台
      master_swt_id: [{
        value: '1',
        label: 'LG-主切换台'
      }],
      // 主视频服务器
      master_vdr_id: [{
        value: '1',
        label: 'LG-主视频服务器'
      }],
      // 外置键混
      master_vdr_chan: [{
        value: '1',
        label: 'LG-主视频播出通道'
      }],
      // 外置键混
      keymix: [{
        value: '1',
        label: '无'
      }],
      // 受控协议
      agreement: [{
        value: '1',
        label: 'UNT_SFT'
      }],
      // 字幕机
      cg: [{
        value: '1',
        label: 'CG-111'
      }],
      // 受控协议
      agreement_post: [{
        value: '1',
        label: 'XY-111'
      }],
      // 第三播出站终端ID
      third_play_term: [{
        value: '1',
        label: '龙腾-Third_playTerm'
      }],
      // 第三播出服务器ID
      third_vdr_id: [{
        value: '1',
        label: '龙腾-Third_VDR_ID'
      }],
      // 第三备播出通道
      third_vdr_chan: [{
        value: '1',
        label: '龙腾-Third_VRD_Chan'
      }],
      // 第三备播出通道
      upplay_vdr_id: [{
        value: '1',
        label: '龙腾-Upplay_VRD_id'
      }],
      // 第三备播出通道
      upplay_vdr_chan: [{
        value: '1',
        label: '龙腾-Upplay_VRD_Chan'
      }],
      // 添加表单的验证规则对象
      addFormRules: {
        channel_name: [
          { required: true, message: '请输入频道名称', trigger: 'blur' },
          { min: 3, max: 30, message: '用户名的长度在3~30个字符', trigger: 'blur' }
        ]
        // ,
        // master_play_term: [
        //   { required: true, message: '请选择主控制终端', trigger: 'blur' }
        // ],
        // slave_play_term: [
        //   { required: true, message: '请选择备控制终端', trigger: 'blur' }
        // ],
        // master_heartbeat_port: [
        //   { required: true, message: '请选择主播出站心跳检测端口', trigger: 'blur' }
        // ],
        // slave_heartbeat_port: [
        //   { required: true, message: '请选择备播出站心跳检测端口', trigger: 'blur' }
        // ],
        // master_swt_id: [
        //   { required: true, message: '请选择主切换台', trigger: 'blur' }
        // ],
        // slave_swt_id: [
        //   { required: true, message: '请选择备切换台', trigger: 'blur' }
        // ],
        // master_vdr_id: [
        //   { required: true, message: '请选择主视频服务器', trigger: 'blur' }
        // ],
        // slave_vdr_id: [
        //   { required: true, message: '请选择备视频服务器', trigger: 'blur' }
        // ],
        // master_vdr_chan: [
        //   { required: true, message: '请选择主视频服务器播出通道', trigger: 'blur' }
        // ],
        // slave_vdr_chan: [
        //   { required: true, message: '请选择备视频服务器播出通道', trigger: 'blur' }
        // ],
        // keymix: [
        //   { required: true, message: '请选择备外置键混', trigger: 'blur' }
        // ],
        // cg: [
        //   { required: true, message: '请选择遥控字幕机', trigger: 'blur' }
        // ],
      },
      // 添加节目参数表单的验证规则对象
      editChannDataFormRules: {}
    }
  },
  created() {
    this.getChannelList()
  },
  methods: {
    // 获取频道列表
    async getChannelList() {
      this.loading = true
      const { data: res } = await this.$http.get('channel/list', {
        params: this.queryInfo
      })
      this.loading = false
      // console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error('获取用户列表失败！')
      }
      this.channelList = res.data.list
      this.total = res.data.total
    },
    // 监听pagesize 改变的事件
    handleSizeChange(nesSize) {
      // console.log(nesSize)
      this.queryInfo.pagesize = nesSize
      this.getChannelList()
    },
    // 监听 当前页码数改变事件
    handleCurrentChange(currPage) {
      this.queryInfo.pagenum = currPage
      this.getChannelList()
      // console.log(currPage)
    },
    // 插播模式的change事件
    handleCheck_InsPlay_flag() {
      if (this.addForm.InsPlay_flag === true) {
        // 显示
        this.disabledInsPlay_flag = false
      } else {
        // 分段插播值置空
        this.addForm.InsPlay_seg = ''
        // 广告插播值置空
        this.addForm.InsPlay_AdvGrp = ''
        // 隐藏
        this.disabledInsPlay_flag = true
      }
    },
    // 第三备change事件
    handleCheck_is_thirdbk() {
      if (this.addForm.is_thirdbk === true) {
        // 显示
        this.disabledis_thirdbk = false
      } else {
        // 隐藏
        this.disabledis_thirdbk = true
      }
    },
    // 监听添加频道对话框的关闭事件
    addDilogClosed() {
      this.$refs.addFormRef.resetFields()
    },
    // 节目参数弹框关闭
    channDataDialogClosed() {
      this.$refs.editChannDataFormRef.resetFields()
    },
    createTypeDialogClosed() {
      this.$refs.editChannDataFormRef.resetFields()
    },
    // 提前播change事件
    handleCheck_is_upplay() {
      if (this.addForm.is_upplay === true) {
        // 显示
        this.disabledis_upplay = false
      } else {
        // 隐藏
        this.disabledis_upplay = true
      }
    },
    // 建单方式change事件，控制span显示内容
    changeCreateType(value) {
      switch (value) {
        case (1) :
          this.createTypeTips = '通过节目单编辑软件由总编室节目生成播出串联单，如果总编室节目单没有生成并审核，则不能生成播出串联单，在自动播出软件中，则自动生成一空节目单。【这是系统默认方式】'
          break
        case (2) :
          this.createTypeTips = '【新的编单方式】不论总编室节目单是否已经生成与否，自动生成该天的一空白节目单。'
          break
        case (3) :
          this.createTypeTips = '【新的编单方式】自动查找前一天的播出串联单与广告节目单，如果存在这些节目单，则自动复制过来生成新的播出节目单与广告节目单(广告节目单的信息中显示自动生成)。'
          break
        case (4) :
          this.createTypeTips = '【新的编单方式】自动查找一周前的对应日期的播出串联单与广告节目单，如果存在这些节目单，则自动复制过来生成新的播出节目单与广告节目单(广告节目单的信息中显示自动生成)。'
          break
      }
    },
    // 添加频道
    addChannel() {
      // 表单验证
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        // 表示通过 可以发起添加用户的网络请求
        console.log(this.addForm)
        // 处理new date时间格式
        this.addForm.s_play_time = this.$commonFun.dateFormat(this.addForm.s_play_time, 'hms')
        this.addForm.upplay_time = this.$commonFun.dateFormat(this.addForm.upplay_time, 'hms')
        console.log(this.addForm.s_play_time)
        const { data: res } = await this.$http.post('channel/add', this.addForm)
        console.log(res)
        if (res.meta.status !== 200) {
          return this.$message.error('添加失败')
        }
        this.$message.success('添加成功')
        // 隐藏添加用户对话框
        this.addDialogVisible = false
        // 重新获取用户列表数据
        this.getChannelList()
      })
    },
    // 显示编辑用户修改的对话框
    async showEditDialog(id) {
      const { data: res } = await this.$http.get('channel/info?id=' + id)
      if (res.meta.status !== 200) {
        return this.$message.error('查询频道信息失败')
      }
      console.log(res.data)
      this.addForm = res.data
      this.editDialogVisible = true
    },
    // 监听编辑频道对话框的关闭事件
    editDilogClosed() {
      this.$refs.addFormRef.resetFields()
    },
    // 编辑频道
    editChannel() {
      // 表单验证
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        // 表示通过 可以发起编辑频道的网络请求
        console.log(this.addForm)
        // 处理new date时间格式
        this.addForm.s_play_time = this.$commonFun.dateFormat(this.addForm.s_play_time, 'hms')
        this.addForm.upplay_time = this.$commonFun.dateFormat(this.addForm.upplay_time, 'hms')
        console.log(this.addForm.s_play_time)
        const { data: res } = await this.$http.post('channel/edit', this.addForm)
        console.log(res)
        if (res.meta.status !== 200) {
          return this.$message.error('编辑失败')
        }
        this.$message.success('编辑成功')
        // 隐藏添加频道对话框
        this.editDialogVisible = false
        // 重新获取频道列表数据
        this.getChannelList()
      })
    },
    // 删除频道
    async delChannel(id) {
      const confirmresult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      console.log(confirmresult)
      if (confirmresult !== 'confirm') {
        return this.$message.info('用户取消了删除')
      }
      // 赋值主键
      // 主键id
      const keyW = { id: id }
      this.keyW.id = id
      const { data: res } = await this.$http.post('channel/del', keyW)
      if (res.meta.status !== 200) {
        return this.$message.error('删除失败！')
      }
      this.$message.success('删除成功')
      // 刷新数据列表
      this.getChannelList()
    },
    // 工具栏搜索按钮触发回调
    searchChange(val) {
      this.drawerVisible = val
    },
    // 工具栏刷新按钮触发回调
    refreshClick() {
      this.getChannelList()
    }
  }
}
</script>

<style lang="less" scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
